<template>
  <a-card :bordered="false">
    <a-steps class="steps" :current="currentTab">
      <a-step title="用户信息" />
      <a-step title="水表信息" />
      <a-step title="计费信息" />
      <a-step title="抄表信息" />
      <a-step title="完成" />
    </a-steps>
    <div class="content">
      <ArcCusStep1 v-if="currentTab === 0" v-bind:formData1="formData1" @nextStep="nextStep"/>
      <ArcCusStep2 v-if="currentTab === 1" v-bind:formData2="formData2" @nextStep="nextStep" @prevStep="prevStep"/>
      <ArcCusStep3 v-if="currentTab === 2" v-bind:formData3="formData3" @nextStep="nextStep" @prevStep="prevStep"/>
      <ArcCusStep4 v-if="currentTab === 3" v-bind:formData4="formData4" @nextStep="nextStep" @prevStep="prevStep"/>
      <ArcCusStep5 v-if="currentTab === 4" @prevStep="prevStep" @finish="finish" />
    </div>    
  </a-card>
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'
  import ArcCusStep1 from './ArcCusStep1'
  import ArcCusStep2 from './ArcCusStep2'
  import ArcCusStep3 from './ArcCusStep3'
  import ArcCusStep4 from './ArcCusStep4'
  import ArcCusStep5 from './ArcCusStep5'

  export default {
    name: "ArcCusStep",
    inject:['closeCurrent'],
    components: {
      ArcCusStep1,
      ArcCusStep2,
      ArcCusStep3,
      ArcCusStep4,
      ArcCusStep5
     
    },
    data () {
      return {
        description: '将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。',
        currentTab: 0,

        // form
        form: null,
        formData1: {},
        formData2: {},
        formData3: {},
        formData4: {},
      }
    },
    methods: {

      // handler
      nextStep () {     
        if (this.currentTab < 5) {
          this.currentTab += 1
        }
      },
      prevStep () {       
        if (this.currentTab > 0) {
          this.currentTab -= 1
        }
      },
      submitForm () {
        const that = this;
        // 触发表单验证       
        that.confirmLoading = true;
        let httpurl = '/arc/arcCustomers/addOpen';
        let method = 'post';

        let dataForm= {
          formData1: that.formData1,
          formData2: that.formData2,
          formData3: that.formData3,
          formData4: that.formData4,
          formData5: that.formData5
        }
        
        httpAction(httpurl,dataForm,method).then((res)=>{
          if(res.success){
            that.$message.success(res.message);
            setTimeout(()=>{this.closeCurrent()},1000) 
          }else{
            that.$message.warning(res.message);
          }
        }).finally(() => {
          that.confirmLoading = false;
        }) 
      },
      finish () {
        //》完成
        this.submitForm();        
      }
    }
  }
</script>

<style lang="less" scoped>
  .steps {
    max-width: 750px;
    margin: 16px auto;
  }
</style>